<!doctype html>
<html lang="zh-cn">

	<head>
		<meta charset="UTF-8" />
		<meta name="format-detection" content="telephone=no" />
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
		<script src="lib/rem.js"></script>
		<link rel="stylesheet" href="css/reset.css" />
		<link rel="stylesheet" href="css/syzindex.css" />
		<title>剑鱼实验室</title>
	</head>
	<body>
	<!--主题内容-->
	<section id="sys-main">
		<!--头部-->
		<section class="header-text">
			<h3>欢迎体验剑鱼实验室</h3>
			<p>这里有剑鱼正在探索的功能，</br>欢迎体验并向我们反馈您的感受和建议！</p>
			<p><img src="images/syzindex/sys-cap.png" alt="" />可参与的实验</p>
		</section>
		<!--列表-->
		<section class="content">
			<ul>
				<li>
					<a href="#">
						<div>智能订阅模式</div>
						<div>更聪明的招标订阅模式</div>
					</a>
				</li>
				<li>
					<a href="#">
						<div>订阅数据导出</div>
						<div>用表格呈现订阅数据，可下载导出</div>
					</a>
				</li>
				<li>
					<a href="#">
						<div>智能订阅模式</div>
						<div>更聪明的招标订阅模式</div>
					</a>
				</li>
				<li>
					<a href="#">
						<div>订阅数据导出</div>
						<div>用表格呈现订阅数据，可下载导出</div>
					</a>
				</li>
				<li>
					<a href="#">
						<div>智能订阅模式</div>
						<div>更聪明的招标订阅模式</div>
					</a>
				</li>
			</ul>
		</section>
	</section>
		
	</body>
	<script src="lib/jquery-3.2.1.min.js"></script>
	<script>
		$(function(){
			/*实验室首页动画*/
			var syzIndexMove = function(){
				var $lists = $("#sys-main .content li"),
					$eq1 = $lists.eq(0),
					$eq2 = $lists.eq(1),
					$eq3 = $lists.eq(2),
					$eq4 = $lists.eq(3),
					$eq5 = $lists.eq(4);
				return{
					moveNow:function(){
						$eq1.animate({
							"top":".2rem",
							"opacity":"1"
						},300);
						$eq2.animate({
							"top":"2.06rem",
							"opacity":"1"
						},600);
						$eq3.animate({
							"top":"3.88rem",
							"opacity":"1"
						},900);
						$eq4.animate({
							"top":"5.71rem",
							"opacity":"1"
						},1200);
						$eq5.animate({
							"top":"7.58rem",
							"opacity":"1"
						},1500);
					}
				}
			}()
			/*调用*/
			syzIndexMove.moveNow()
			
		})
	</script>
</html>